
<template>
  <div class="viewDetail">
    <div class="viewDetail-title">任务详情</div>
    <div class="content-view">
      <div class="task-info">
        <div class="title">22222222222</div>
        <div class="task-info-tags">
          <div class="task-item">单次定时群发消息任务</div>
          <div class="task-item" style="background-color: rgba(0, 0, 0, 0.25);color: #fff;">已取消</div>
        </div>
      </div>
      <div class="card-info-list">
        <div class="list-item" v-for="item in infoList" :key="item.id">
          <div class="label">{{ item.label }}</div>
          <div :class="['value', item.onfunc && 'color-blue']" v-if="item.onfunc" @click.prevent="item.onfunc">{{ item.value }}</div>
          <div :class="['value', item.onfunc && 'color-blue']" v-else>{{ item.value }}</div>
        </div>
      </div>
      <div class="tab-bar">
        <el-tabs v-model="tabsValue" type="card">
          <el-tab-pane label="群发内容" name="0">
            <div class="tab-msg">
              <div class="chat-list">
                <div class="chat-item">
                  <div class="serial-number">1</div>
                  <div class="chat-text">222222</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="下发企微号" name="1">
            <div class="tips">
              <el-alert
                type="warning"
                show-icon>
                <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
                  具体发送进度详情可点击下面列表中的【查看】至各个企微号下对应任务中查看。
                </div>
              </el-alert>
            </div>
            <div class="tabs-card">
              <div class="card-item">
                <div class="title">
                  总对象数
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">根据设置符合条件的所有对象总数。</div>
                    <svg-icon icon-class="iquestion"/>
                  </el-tooltip>
                </div>
                <div class="count">2</div>
              </div>
              <div class="card-item">
                <div class="title">
                  流失好友过滤
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">任务开始时，直接过滤的对象数，不<br/>进入发送队列。如果创建任务流失和<br/>拉黑好友选择发送时，流失和拉黑好<br/>友不会统计此处。</div>
                    <svg-icon icon-class="iquestion"/>
                  </el-tooltip>
                </div>
                <div class="count">0</div>
              </div>
              <div class="card-item">
                <div class="title">
                  执行完成
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">系统已经执行完成发送的对象数。</div>
                    <svg-icon icon-class="iquestion"/>
                  </el-tooltip>
                </div>
                <div class="count">2</div>
              </div>
              <div class="card-item">
                <div class="title">
                  发送失败
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">执行发送后，系统有检测到离线、拉<br/>黑或者流失添加好友等系统消息时，<br/>判定为发送失败</div>
                    <svg-icon icon-class="iquestion"/>
                  </el-tooltip>
                </div>
                <div class="count">2</div>
              </div>
              <div class="card-item">
                <div class="title">
                  执行完成（未失败）
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">由于系统无法检测实际发送是否成<br/>功，未收到离线、拉黑或者流失添加<br/>好友等系统消息时，默认都是发送完<br/>成。执行完成（未失败）=执行完成<br/>-发送失败。</div>
                    <svg-icon icon-class="iquestion"/>
                  </el-tooltip>
                </div>
                <div class="count">2</div>
              </div>
            </div>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="企微号"
              >
              </el-table-column>
              <el-table-column
                prop="date"
                label="群发对象"
              >
              </el-table-column>
              <el-table-column label="发送进度">
                <el-table-column
                  prop="name"
                  label="流失好友过滤"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="执行完成"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="发送失败"
                  width="120">
                </el-table-column>
              </el-table-column>
              <el-table-column
                prop="date"
                label="发送状态"
              >
              </el-table-column>
              <el-table-column
                prop="date"
                label="操作"
              >
              </el-table-column>
              <template slot="empty">
                <TableEmpty />
              </template>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="footer">
      <span>更多操作请前往</span>
      <el-button type="primary" size="small">任务详情</el-button>
    </div>
<!--    <div class="empty-content">-->
<!--      <img class="empty-cover" src="@/assets/images/peiyNU.png" />-->
<!--    </div>-->
  </div>
</template>
<script>
export default {
  name: "massProduction",
  data(){
    return{
      dateType: 1,
      tabsValue: '1',
      tableData: [],
      infoList: [
        {id: 1, label: '创建人：', value: '主账号'},
        {id: 2, label: '创建时间：', value: '2024-02-26 11:27'},
        {id: 3, label: '开始时间：', value: '2024-03-21 11:27'},
        {id: 4, label: '结束时间：', value: '2024-02-27 13:41'},
        {id: 5, label: '群发对象条件：', value: '查看', onfunc: () => { this.sendRequireVisible = true}},
        {id: 6, label: '单向好友：', value: '不发送'},
        {id: 7, label: '分组：', value: '不分组'},
        {id: 8, label: '异常自动处理：', value: '查看',onfunc: () => { this.autoExceptionVisible = true }}
      ],
    }
  }
}
</script>

<style scoped lang="scss">
.viewDetail {
  height: 100%;
  position: relative;
  .task-info {
    .title {
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: 600;
      color: rgba(0, 0, 0, .85);
    }
    .task-info-tags {
      display: flex;
      align-items: center;
      .task-item {
        color: rgba(0, 0, 0, .85);
        background-color: #e0eaff;
        border: 1px solid #a2beff;
        padding: 2px 7px;
        font-size: 12px;
        line-height: 24px;
        border-radius: 4px;
        &:not(:first-child) {
          margin-left: 8px;
          border: 1px solid #e9e9e9;
        }
      }
    }
  }
  .card-info-list {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin: 12px 0 20px;
    column-gap: 8px;

    flex-wrap: wrap;
    .list-item {
      margin: 0px 0 0px;
      width: 150px;
      padding: 16px;
      .label {
        color: rgba(0, 0, 0, .45);
        font-size: 12px;
        line-height: 22px;
      }
      .value {
        color: rgba(0, 0, 0, .85);
        font-size: 14px;
        line-height: 22px;
        &.color-blue {
          color: #3070ff;
          cursor: pointer;
        }
      }
    }
  }
  .tab-bar {
    position: relative;
    .tab-msg {
      background: #f3f3f3;
      border: 1px solid #e9e9e9;
      padding: 20px 0;
      .chat-list {
        .chat-item {
          display: flex;
          align-items: center;
          min-height: 60px;
          padding: 10px;
          .serial-number {
            margin-left: 20px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            background: #ddd;
            border-radius: 50%;
            display: inline-block;
            text-align: center;
          }
          .chat-text {
            margin-left: 12px;
            padding: 6px 12px;
            font-size: 15px;
            color: #000;
            background: #fff;
            border: 1px solid #e9e9e9;
            border-radius: 5px;
          }
        }
      }
    }
    .absolute-export-btn {
      position: absolute;
      top: 0;
      right: 0px;
    }
    .tips {
      margin-bottom: 20px;
    }
    .tabs-card {
      padding: 12px 5px;
      margin-bottom: 12px;
      background: rgb(245, 245, 245);
      display: flex;
      .card-item {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        line-height: 22px;
        background: #fff;
        border-radius: 4px;
        padding: 8px 10px;
        margin:  0 8px;
        flex: 1;
        .title {
          color: rgba(0, 0, 0, .45);
          margin-bottom: 4px;
          font-size: 14px;
          line-height: 22px;
          i {
            margin-left: 8px;
            font-size: 16px;
          }
        }
        .count {
          margin-top: 4px;
          font-size: 24px;
          font-weight: 600;
          color: rgba(0, 0, 0, .85);
        }
      }
    }
  }
  .empty-content {
    margin: 150px 8px;
    font-size: 14px;
    line-height: 1.5715;
    text-align: center;
    .empty-cover {
      width: 100px;
      height: 100px;
      margin-bottom: 8px;
    }
  }
}
.content-view {
  overflow-y: auto;
  height: calc(100% - 100px);
  padding: 10px;
}
.footer {
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #fff;
  z-index: 1;
  span {
    margin-right: 10px;
    color: rgba(0, 0, 0, .45);
  }
}

.viewDetail-title {
  height: 50px;
  line-height: 50px;
  padding-left: 16px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
}
</style>
